<template>
	<view class="home">
		<view <view v-for="v in houseMag" :key="v.checkTime">
			<view class="swiper">
				<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
					<swiper-item>
						<view class="swiper-item">
							<img :src="v.housePhoto">
						</view>
					</swiper-item>
					<swiper-item>
						<view class="swiper-item"><img :src="v.housePhoto"></view>
					</swiper-item>
				</swiper>
			</view>
			<view class="content">

				<view class="content-msg">
					<text class="money">￥{{v.rent}}/月</text>
					<span>{{v.rentalWay}} {{v.houseType}}</span>
				</view>
				<view class="content-position">
					<view class="content-position-item">
						<text>朝向</text>
						<span>{{v.buildingHead}}</span>
					</view>
					<view class="content-position-item">
						<text>面积</text>
						<span>{{v.buildingArea}}</span>
					</view>
					<view class="content-position-item">
						<text>楼层</text>
						<span>{{v.floor}}</span>
					</view>
					<view class="content-position-item">
						<text>入住时间</text>
						<span>{{v.checkTime.substring(5,10)}}</span>
					</view>
				</view>

			</view>
			<view class="introduce">
				<view class="introduce-header">
					<text>房屋介绍</text>
				</view>
				<view class="introduce-content">
					<view class="introduce-content-item" v-for="v2 in v.appliancesList" :key="v2.id">
						<view>
							<span>
								<uni-icons type="checkmarkempty" size="16"></uni-icons>
							</span>
							<text>{{v2.appliancesName}}</text>
						</view>

					</view>

				</view>
				<view class="introduce-msg">
					<span>{{v.housingInformation}}</span>

				</view>
			</view>
			<view class="relation">
				<view class="relation-header">
					<text>房东联系方式</text>
				</view>
				<view class="relation-content">
					<span>手机号码：{{v.phoneNumber}}</span>
					<span>微信：{{v.wx}}</span>
				</view>
			</view>
			<view class="phone-box">
				<view @click="collection" class="collection">
					<uni-rate v-model="collectId" max='1' @change="onChange" />
					<text>收藏</text>
				</view>

				<button class="button" type="primary" @click="call"><text class="button-text">打电话</text></button>
			</view>
		</view>


	</view>
</template>

<script>
	import {
		http
	} from "../../../utils/http.js"
	export default {
		data() {
			return {
				rateValue: 0,
				collectId:"",
				collect:"",
				houseMag: [],
				id: "",
			};
		},
		methods: {
			call() {
				uni.makePhoneCall({
					phoneNumber: '19981452206' //仅为示例
				});
			},
			collection() {
				// 后台渲染
				console.log(this.collectId)
				http(
				{
					url: "/houseRent/updateStatus",
					method: "put",
					data: {
						collect: this.collect,
						id: Number(this.id)
					},

				}).then((res) => {
					if (res.code == 0) {
						this.getData()
						}
				})
				
			},
			onChange(e) {
				// 后台更新
				
			},
			getData() {
				http({
					url: "/houseRent/list",
					method: "post",
					data: {
						id: this.id
					}
				}).then((res) => {
					if (res.code == 0) {
						this.houseMag = res.data;
						this.collectId = res.data[0].collect
						if (this.collectId == 0) {
							this.collect = 1
						}else{
							this.collect = 0
						}
					} else {
						console.log("数据接收失败")
					}
				})
			}
		},
		onLoad(option) {
			this.id = option.id
			// console.log(this.id)
			this.getData()
		},
	}
</script>

<style lang="less">
	@import url('../../../static/font/iconfont.css');

	.home {
		height: 100%;
		padding: 40rpx;
		display: flex;
		flex-direction: column;

		.swiper {
			border-radius: 8px;
			margin-bottom: 20rpx;
			height: 400rpx;
			box-shadow: 0px 0px 15rpx rgba(0, 0, 0, .2);

			swiper,
			swiper-item,
			.swiper-item {
				width: 100%;
				height: 100%;
				border-radius: 8px;

				img {
					width: 100%;
					height: 100%;
				}
			}
		}

		.content {
			height: 314rpx;
			margin-bottom: 48rpx;

			.content-msg {
				display: flex;
				flex-direction: column;
				margin: 10px 0;

				.money {
					color: red;
					font-size: 44rpx;
				}

			}

			.content-position {
				height: 166rpx;
				border-top: 1px solid #a2a2a2;
				border-bottom: 1px solid #a2a2a2;
				display: flex;
				justify-content: space-evenly;

				.content-position-item {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					line-height: 72rpx;
					width: 140rpx;

					span {}

					text {
						color: #a2a2a2;
						font-size: 28rpx;
					}
				}
			}
		}

		.introduce {
			height: 444rpx;
			margin-bottom: 48rpx;

			.introduce-header {}

			.introduce-content {
				display: flex;
				justify-content: center;
				height: 230rpx;
				padding: 50rpx;
				flex-wrap: wrap;

				.introduce-content-item {
					width: 33%;
					display: flex;
					justify-content: center;
					flex-direction: column;

					line-height: 58rpx;

					view {
						display: flex;
						justify-content: center;
						font-size: 26rpx;
					}
				}
			}

			.introduce-msg {
				display: flex;
				flex-direction: column;
				line-height: 54rpx;
				font-size: 32rpx;
			}
		}

		.relation {
			height: 274rpx;
			display: flex;
			flex-direction: column;

			.relation-header {
				margin-bottom: 40rpx;
			}

			.relation-content {
				display: flex;
				flex-direction: column;
				line-height: 50rpx;
			}
		}

		.phone-box {
			display: flex;
			align-items: center;

			.collection {
				width: 170rpx;
				display: flex;

				text {
					color: #a2a2a2;
				}
			}

			.button {
				height: 100rpx;
				width: 550rpx;
			}
		}
	}
</style>
